<template>
	<div>
		<div class="flex justify_content_between align_items_center  content-wrapper p_lr_20 m_b_20">
			<div>
				<h2>生产基地</h2>
			</div>
			<div>
				<Language></Language>
			</div>
		</div>

		<div  class="content-wrapper p_20">
			<div class="back">
				<div class="d1" style="top:36px;left:433px" @click="editContent('pro_0','c')">{{tableData.pro_0.value.content}}</div>
				
				
				
				<div class="d2" style="top:183px;left:265px" @click="edit('pro_1')">
					<img :src="imgURL + tableData.pro_1.value.url" alt="" height="100%">
				</div>
				
				<div class="d3 p_t_20 flex justify_content_center align_items_end" style="top:567px;left:265px" @click="editContent('pro_2')">
					<div class="text_center">
						<p style="margin-bottom: 40px;color:#fff;">{{tableData.pro_2.value.title}}</p>
						<h3>{{tableData.pro_2.value.text}}</h3>
					</div>
				</div>
				<div class="d3 p_t_20 flex justify_content_center align_items_end" style="top:567px;left:590px" @click="editContent('pro_3')">
					<div class="text_center">
						<p style="margin-bottom: 40px;color:#fff;">{{tableData.pro_3.value.title}}</p>
						<h3>{{tableData.pro_3.value.text}}</h3>
					</div>
				</div>
				<div class="d3 p_t_20 flex justify_content_center align_items_end" style="top:567px;left:919px" @click="editContent('pro_4')">
					<div class="text_center">
						<p style="margin-bottom: 20px;color:#fff;">{{tableData.pro_4.value.title}}</p>
						<h3>{{tableData.pro_4.value.text}}</h3>
					</div>
				</div>
				
				
				<div class="d2" style="top:910px;left:265px" @click="edit('pro_5')">
					<img :src="imgURL + tableData.pro_5.value.url" alt="" height="100%">
				</div>
				
				
				<div class="d4" style="top:1268px;left:265px" @click="editContent('pro_6')">
					<h2 style="padding-left:60px">{{tableData.pro_6.value.title}}</h2>
					<p class="p_20">{{tableData.pro_6.value.text}}</p>
				</div>
				<div class="d4" style="top:1268px;left:590px" @click="editContent('pro_7')">
					<h2 style="padding-left:60px">{{tableData.pro_7.value.title}}</h2>
					<p class="p_20">{{tableData.pro_7.value.text}}</p>
				</div>
				<div class="d4" style="top:1268px;left:919px" @click="editContent('pro_8')">
					<h2 style="padding-left:60px">{{tableData.pro_8.value.title}}</h2>
					<p class="p_20">{{tableData.pro_8.value.text}}</p>
				</div>
				
				
			</div>
			
			<Edit ref="Edit"></Edit>
			
			<!-- 编辑内容 -->
			<el-dialog :visible.sync="isShow1" title="编辑" :close-on-click-modal="false" @close="closeDialog">
				<!-- <el-divider></el-divider> -->
				<el-form label-width="80px">
					
					
					<el-form-item label="标题" v-if="c != 'c'">
						<el-input v-model="form.title" class="w_400"></el-input>
					</el-form-item>
					<el-form-item label="内容" v-if="c != 'c'">
						<!-- <div v-for="(item,index) in form.text" :key="index"> -->
							<el-input v-model="form.text" class="w_400 m_b_10 m_r_10"></el-input>
							<!-- <el-button size="small" icon="el-icon-minus" @click="delText" v-if="index == form.text.length-1"></el-button> -->
						<!-- </div> -->
						<!-- <el-button size="small" icon="el-icon-plus" @click="addText"></el-button> -->
					</el-form-item>
					<el-form-item label="内容"  v-if="c == 'c'">
						<el-input v-model="form.content" class="w_400" type="textarea" :rows="6"></el-input>
					</el-form-item>
					
					
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="closeDialog">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>
<script type="text/javascript">
	import methods from './method'
	import Edit from './edit/edit'

	export default {
		data() {
			return {
				tableData: {
					pro_0:{value:{}},
					pro_1:{value:{}},
					pro_2:{value:{}},
					pro_3:{value:{}},
					pro_4:{value:{}},
					pro_5:{value:{}},
					pro_6:{value:{}},
					pro_7:{value:{}},
					pro_8:{value:{}},
				}, //列表数据
				
				
				c:'',
				key1:'',//key
				isShow1:false,//标题内容编辑
				form:{//form
					title:'',
					text:'',
					content:''
				}
			}
		},
		methods: methods,
		components:{
			Edit
		},
		mounted() {
			this.getTableData()
		}
	}
</script>

<style scoped>
	.back {
		height: 1500px;
		width: 1500px;
		background: url(../../../assets/imgs/production.jpg) no-repeat;
		background-size: contain;
		position: relative;
	}
	.back div {
		position: absolute;
		/* color:#fff; */
		padding: 10px;
		box-sizing: border-box;
		/* border: 1px solid #F00; */
	}
	
	.back .d1 {
		width: 619px;
		height: 47px;
	}
	
	
	.back .d2 {
		width: 967px;
		height: 314px;
	}
	.back .d3 {
		width: 313px;
		height: 125px;
	}
	.back .d4 {
		width: 318px;
		height: 157px;
	}
	
</style>